<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>蘑菇街-向商家付款</title>
	<!-- Set render engine for 360 browser -->
	<meta name="renderer" content="webkit">
	<!--css样式列表-->
	<link rel="stylesheet" href="css/amazeui.min.css">
	<link rel="stylesheet" href="css/app.css">
	<!--js脚本列表-->
	<script src="js/jquery.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/amazeui.min.js"></script>
	<!--必要JS（自适应手机端 px -> rem ）-->
	<script>
    !function (e) {
      function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {
          exports: {}, id: a, loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
      }

      var i = {};
      return t.m = e, t.c = i, t.p = "", t(0)
    }([function (e, t) {
      "use strict"
      ;Object.defineProperty(t, "__esModule", {
        value: !0
      });
      var i = window;
      t["default"] = i.flex = function (e, t) {
        var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent,
          d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.) {5,})/i),
          c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
          s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s, m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
      }, e.exports = t["default"]
    }]);
    flex(100, 1);
	</script>
</head>
<body>
<div class="all-container pay-bg">
	<div class="login-register-header">
		<div class="back-btn"><a href="javascript:history.go(-1)"><img src="images/return@2x.png" alt="返回"/></a></div>
		<div>
			<div class="invite-header-c d-flex">
				<span class="add-agent-title">向商家付款</span>
			</div>
		</div>
	</div>
	<div class="pay-f-1">
		<div>
			<div class="d-flex">
				<div><img src="./images/pay02_03.png" alt="商店"></div>
				<div>
					<span>大润发超市</span>
					<p>大润发超市深圳民治分店</p>
				</div>
			</div>
			<div class="d-flex">
				<span>￥</span><input readonly value="" name="price" id="pay" placeholder="消费金额" type="text"/>
			</div>
			<div class="d-flex pay-div">
				<span>首单优惠</span>
				<span class="all-color">-￥1</span>
			</div>
			<div class="d-flex pay-div">
				<span>余额</span>
				<div class="d-flex">
					<span class="all-color">-￥15</span><input type="checkbox">
				</div>
			</div>
			<div class="d-flex">
				<div>
					<span>小计:</span>
					<span class="all-color">￥345</span>
				</div>
			</div>
		</div>
	</div>
	<div class="pay-logo">
		<img src="./images/pay02_07.png" alt="商家图标">
		<span>欢迎使用芝麻街商户</span>
	</div>
	<table class="pay-key">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td class="pay-del"><img src="./images/pay02_11.png" alt="删除"></td>
		</tr>
		<tr>
			<td class="pat-td-4">4</td>
			<td>5</td>
			<td>6</td>
			<td class="all-pay-o" rowspan="3">确认支付</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		<tr>
			<td colspan="2">0</td>
			<td>.</td>
		</tr>
	</table>
	<div class="pay-for-phone">
		<div>
			<p>绑定手机</p>
			<div><input type="text" value="13800138000"></div>
			<div class="d-flex"><input type="text" placeholder="请输入您的验证码"><button>获取验证码</button></div>
			<button>完成</button>
			<span>注册会员, 最高可获得10元无门槛现金红包。</span>
		</div>
	</div>
</div>
<script></script>
</body>
</html>
